<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.1/css/all.min.css" integrity="sha512-9my9Mb2+0YO+I4PUCSwUYO7sEK21Y0STBAiFEYoWtd2VzLEZZ4QARDrZ30hdM1GlioHJ8o8cWQiy8IAb1hy/Hg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>@import "dist/ourbigbook.css";

</style>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header>
<a href="/">Ciro Santilli???</a>
<a href=".">Ourbigbook!!!</a>
<a class="font-awesome-container" href="https://github.com/cirosantilli/ourbigbook"><i class="fab fa-github fa-fw"></i></a>
</header>
<main class="ourbigbook">
<div><span class="hide-hover"><a href=".#table"><span class="fa-solid-900"></span></a></span><div class="h" id="table"><h1><a href="" title="link to this element">Table (<code>|| </code>, <code>| </code>, <code>\Table</code>, <code>\Tr</code>, <code>\Th</code> and <code>\Td</code>)</a></h1>
<span class="hover-meta"> <span class="sep"></span><a title="view all headers in a single page" href=".#table"><span class="fa-solid-900"></span> nosplit</a><span class="sep"></span><a href=".#macro" title="parent header"><span class="fa-solid-900"></span> "Macro"</a><span class="sep"></span><span class="metrics"><span title="word count for this node + all descendants"><span class="fa-regular-400"></span> words: <span class="word-count-descendant">492</span></span></span></span></div><nav class="h-nav h-nav-toplevel"><div class="nav"> <span title="tags" class="fa-solid-900"></span> tags: <a href=".#macros-with-insane-shortcut" title="internal link
word count: 3
descendant word count: 363
descendant count: 33">Macros with insane shortcut</a></div><div class="nav"> <a href=".#macro" title="parent header"><span class="fa-solid-900"></span> "Macro"</a><span class="sep"></span><a title="view all headers in a single page" href=".#table"><span class="fa-solid-900"></span> nosplit</a><span class="sep"></span><a href="#toc"><span class="fa-solid-900"></span> toc</a><span class="sep"></span><span class="metrics"><span title="word count for this node + all descendants"><span class="fa-regular-400"></span> words: <span class="word-count-descendant">492</span></span></span></div></nav>
</div><div><span class="hide-hover"><a href="#_1332"><span class="fa-solid-900"></span></a></span><div class="p" id="_1332">The <a href=".#insane-code-and-math-shortcuts" title="internal link
word count: 0
descendant word count: 72
descendant count: 72">insane</a> syntax marks:<div><ul id="_1333">
<li id="_1334">headers with <code>|| </code> (pipe, pipe space) at the start of a line</li>
<li id="_1335">regular cells with <code>| </code> (pipe, space) at the start of a line</li>
<li id="_1336">separates rows with double newline
</li>
</ul></div>For example:
<div class="code" id="_1337">
<pre><code>|| Header 1
|| Header 2

| 1 1
| 1 2

| 2 1
| 2 2
</code></pre></div><div class="p" id="_1338">which renders as:</div><blockquote id="_1339"><div class="table" id="_1340">
<table>
<thead>
<tr id="_1341">
<th id="_1342">Header 1</th>
<th id="_1343">Header 2</th>
</tr>
</thead>
<tbody>
<tr id="_1344">
<td id="_1345">1 1</td>
<td id="_1346">1 2</td>
</tr>
<tr id="_1347">
<td id="_1348">2 1</td>
<td id="_1349">2 2</td>
</tr>
</tbody>
</table>
</div>
</blockquote>
Empty cells are allowed without the trailing space however:
<div class="code" id="_1350">
<pre><code>| 1 1
|
| 1 3

| 2 1
|
| 2 3
</code></pre></div><div class="p" id="_1351">which renders as:</div><blockquote id="_1352"><div class="table" id="_1353">
<table>
<tbody>
<tr id="_1354">
<td id="_1355">1 1</td>
<td id="_1356"></td>
<td id="_1357">1 3</td>
</tr>
<tr id="_1358">
<td id="_1359">2 1</td>
<td id="_1360"></td>
<td id="_1361">2 3</td>
</tr>
</tbody>
</table>
</div>
</blockquote></div></div><div><span class="hide-hover"><a href="#_1362"><span class="fa-solid-900"></span></a></span><div class="p" id="_1362">Equivalent fully explicit version:
<div class="code" id="_1363">
<pre><code>\Table[
\Tr[
  \Th[Header 1]
  \Th[Header 2]
]
\Tr[
  \Td[1 1]
  \Td[1 2]
]
\Tr[
  \Td[2 1]
  \Td[2 2]
]
]
</code></pre></div><div class="p" id="_1364">which renders as:</div><blockquote id="_1365"><div class="table" id="_1366">
<table>
<thead>
<tr id="_1367">
<th id="_1368">Header 1</th>
<th id="_1369">Header 2</th>
</tr>
</thead>
<tbody>
<tr id="_1370">
<td id="_1371">1 1</td>
<td id="_1372">1 2</td>
</tr>
<tr id="_1373">
<td id="_1374">2 1</td>
<td id="_1375">2 2</td>
</tr>
</tbody>
</table>
</div>
</blockquote>
Any white space indentation inside an explicit <code>\Tr</code> can make the code more readable, and is automatically removed from final output due to <a href=".#remove-whitespace-children" title="internal link
word count: 0
descendant word count: 101
descendant count: 101"><code>remove_whitespace_children</code></a> which is set for <code>\Table</code>.</div></div><div><span class="hide-hover"><a href="#_1376"><span class="fa-solid-900"></span></a></span><div class="p" id="_1376">To pass further arguments to an implicit table such as <code>title</code> or <code>id</code>, you need to use an explicit <code>table</code> macro as in: <a href="#table-my-table" title="internal link
word count: 0
descendant word count: 0
descendant count: 0">Table 2. "My table title."</a>.
<div class="code" id="_1377">
<pre><code>\Table
{title=My table title.}
{id=table-my-table}
[
|| Header 1
|| Header 2

| 1 1
| 1 2

| 2 1
| 2 2
]
</code></pre></div><div class="p" id="_1378">which renders as:</div><blockquote id="_1379"><div class="table" id="table-my-table">
<div class="caption"><a href="#table-my-table"><span class="caption-prefix">Table 2</span></a>. My table title.</div><table>
<thead>
<tr id="_1380">
<th id="_1381">Header 1</th>
<th id="_1382">Header 2</th>
</tr>
</thead>
<tbody>
<tr id="_1383">
<td id="_1384">1 1</td>
<td id="_1385">1 2</td>
</tr>
<tr id="_1386">
<td id="_1387">2 1</td>
<td id="_1388">2 2
</td>
</tr>
</tbody>
</table>
</div>
</blockquote>
We would like to remove that explicit toplevel requirement as per: <a href="https://github.com/cirosantilli/ourbigbook/issues/186">https://github.com/cirosantilli/ourbigbook/issues/186</a> The rules of when the caption shows up or not similar to those of <a href=".#image" title="internal link
word count: 16
descendant word count: 2k
descendant count: 181">images</a> as mentioned at <a href=".#image-caption" title="internal link
word count: 0
descendant word count: 260
descendant count: 260">Section "Image caption"</a>.</div></div><div><span class="hide-hover"><a href="#_1389"><span class="fa-solid-900"></span></a></span><div class="p" id="_1389">Multiple source lines, including paragraphs, can be added to a single cell with insane syntax by indenting the cell with exactly two spaces just as for <a href=".#list" title="internal link
word count: 0
descendant word count: 346
descendant count: 346">lists</a>, e.g.:
<div class="code" id="_1390">
<pre><code>|| h1
|| h2
|| h3

  h3 2

| 11
| 12

  12 2
| 13

| 21
| 22
| 23
</code></pre></div><div class="p" id="_1391">which renders as:</div><blockquote id="_1392"><div class="table" id="_1393">
<table>
<thead>
<tr id="_1394">
<th id="_1395">h1</th>
<th id="_1396">h2</th>
<th id="_1397"><div class="p" id="_1398">h3</div><div class="p" id="_1399">h3 2</div></th>
</tr>
</thead>
<tbody>
<tr id="_1400">
<td id="_1401">11</td>
<td id="_1402"><div class="p" id="_1403">12</div><div class="p" id="_1404">12 2</div></td>
<td id="_1405">13</td>
</tr>
<tr id="_1406">
<td id="_1407">21</td>
<td id="_1408">22</td>
<td id="_1409">23</td>
</tr>
</tbody>
</table>
</div>
</blockquote>
Arbitrarily complex nested constructs may be used, e.g. a table inside a list inside table:
<div class="code" id="_1410">
<pre><code>| 00
| 01

  * l1
  * l2

    | 20
    | 21

    | 30
    | 31

| 10
| 11
</code></pre></div><div class="p" id="_1411">which renders as:</div><blockquote id="_1412"><div class="table" id="_1413">
<table>
<tbody>
<tr id="_1414">
<td id="_1415">00</td>
<td id="_1416"><div class="p" id="_1417">01</div><div><ul id="_1418">
<li id="_1419">l1</li>
<li id="_1420"><div class="p" id="_1421">l2</div><div class="table" id="_1422">
<table>
<tbody>
<tr id="_1423">
<td id="_1424">20</td>
<td id="_1425">21</td>
</tr>
<tr id="_1426">
<td id="_1427">30</td>
<td id="_1428">31</td>
</tr>
</tbody>
</table>
</div>
</li>
</ul></div></td>
</tr>
<tr id="_1429">
<td id="_1430">10</td>
<td id="_1431">11</td>
</tr>
</tbody>
</table>
</div>
</blockquote></div></div><div><span class="hide-hover"><a href="#_1432"><span class="fa-solid-900"></span></a></span><div class="p" id="_1432">And now a table outside of <a href=".#ourbigbookexample" title="internal link
word count: 0
descendant word count: 57
descendant count: 57"><code>\OurbigbookExample</code></a> to test how it looks directly under <a href=".#toplevel" title="internal link
word count: 0
descendant word count: 105
descendant count: 105">the <code>\Toplevel</code> implicit macro</a>:</div></div><div><span class="hide-hover"><a href="#table-my-table-title"><span class="fa-solid-900"></span></a></span><div class="table" id="table-my-table-title">
<div class="caption"><a href="#table-my-table-title"><span class="caption-prefix">Table 3</span></a>. My table title.</div><table>
<thead>
<tr id="_1433">
<th id="_1434">Header 1</th>
<th id="_1435">Header 2</th>
</tr>
</thead>
<tbody>
<tr id="_1436">
<td id="_1437">1 1</td>
<td id="_1438">1 2</td>
</tr>
<tr id="_1439">
<td id="_1440">2 1</td>
<td id="_1441">2 2</td>
</tr>
</tbody>
</table>
</div>
</div><div><span class="hide-hover"><a href="#_1442"><span class="fa-solid-900"></span></a></span><div class="p" id="_1442">And a fully insane one:</div></div><div><span class="hide-hover"><a href="#_1443"><span class="fa-solid-900"></span></a></span><div class="table" id="_1443">
<table>
<thead>
<tr id="_1444">
<th id="_1445">Header 1</th>
<th id="_1446">Header 2</th>
</tr>
</thead>
<tbody>
<tr id="_1447">
<td id="_1448">1 1</td>
<td id="_1449">1 2</td>
</tr>
<tr id="_1450">
<td id="_1451">2 1</td>
<td id="_1452">2 2</td>
</tr>
</tbody>
</table>
</div>
</div><div><span class="hide-hover"><a href="#toc"><span class="fa-solid-900"></span></a></span><div id="toc"class="toc-container">
<ul>
<li class="has-child toplevel"><div class="title-div"><div class="arrow"><div></div></div><span class="not-arrow"><a class="title" href="#toc">Table of contents</a><span class="hover-metadata"><span class="metrics-sep"><span class="sep"></span><span class="metrics"><span title="word count for this node + all descendants"><span class="fa-regular-400"></span> <span class="word-count-descendant">492</span></span></span></span></span></span></div>
<ul>
<li><div id="toc-table-sorting"><div class="arrow"><div></div></div><span class="not-arrow"><a href="table-sorting">1. Table sorting</a><span class="hover-metadata"><span class="sep"></span><a href="#toc-table-sorting" title="link to this ToC entry"><span class="fa-solid-900"></span> link</a><span class="sep"></span><a title="view all headers in a single page" href=".#table-sorting"><span class="fa-solid-900"></span> nosplit</a><span class="sep"></span><a href="#toc" title="parent ToC entry"><span class="fa-solid-900"></span> "Table"</a><span class="metrics-sep"><span class="sep"></span><span class="metrics"><span title="word count for this node"><span class="fa-regular-400"></span> <span class="word-count">65</span></span></span></span></span></span></div></li>
</ul>
</li>
</ul>
</div>
</div><div><span class="hide-hover"><a href="#ancestors"><span class="fa-solid-900"></span></a></span><h2 id="#ancestors"><a href="#ancestors">Ancestors</a></h2></div>
<div><ul>
<li><a href=".#macro" title="internal link
word count: 155
descendant word count: 14k
descendant count: 14">Macro</a></li>
<li><a href="." title="internal link
word count: 296
descendant word count: 32k
descendant count: 234">OurBigBook</a></li>
</ul></div><div><span class="hide-hover"><a href="#incoming-links"><span class="fa-solid-900"></span></a></span><h2 id="incoming-links"><a href="#incoming-links">Incoming links</a></h2></div>
<div><ul>
<li><a href=".#auto-parent" title="internal link
word count: 0
descendant word count: 54
descendant count: 54"><code>auto_parent</code> macro property</a></li>
<li><a href=".#macros-with-insane-shortcut" title="internal link
word count: 3
descendant word count: 363
descendant count: 33">Macros with insane shortcut</a></li>
</ul></div></main>
<footer>
<div>License: <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a> unless noted</div>
<div>Website source code: <a href="https://github.com/cirosantilli/ourbigbook">https://github.com/cirosantilli/ourbigbook</a></div>
<div>Website Git version: <a href="https://github.com/cirosantilli/ourbigbook/commit/72b4ad0343402d4c826196c7d9bc27ae17c31e1d">72b4ad0343402d4c826196c7d9bc27ae17c31e1d</a></div>
</footer>
<script>
<!-- Google Analytics, AKA selling my soul to Google for some backlinks. -->
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47867706-1', 'auto');
ga('send', 'pageview');
</script>
<script src="dist/ourbigbook_runtime.js"></script>
<script>ourbigbook_runtime.ourbigbook_runtime()</script>
</body>
</html>
